<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { getShowValue } from "@/utils/equip";

interface Props {
    detailV2: Equip.EquipInfo;
}
const props = withDefaults(defineProps<Props>(), {});
const chart = {
    instance: null as echarts.ECharts | null,
    option: {
        color: ["#a5a7e2"],
        legend: { show: false },
        tooltip: { trigger: "item" },
        series: [
            {
                type: "gauge",
                startAngle: 90,
                endAngle: -270,
                pointer: { show: false },
                progress: { show: true, roundCap: true },
                axisLine: {
                    lineStyle: { color: [[1, "#202539"]] },
                },
                axisLabel: { show: false },
                splitLine: { show: false },
                axisTick: { show: false },
                data: [{ name: "氧气浓度(%)", value: "0" }],
                title: {
                    fontSize: 14,
                    color: "#f3eabf",
                    offsetCenter: [0, "30%"],
                },
                detail: {
                    width: 50,
                    height: 14,
                    fontSize: 34,
                    color: "#f3eabf",
                    formatter: "{value}",
                    offsetCenter: [0, "-10%"],
                },
            },
        ],
    },
};
const oChart = ref<HTMLDivElement | null>(null);
watch(
    () => props.detailV2.dtAI[4]?.value,
    () => updateChart()
);
onMounted(async () => {
    chart.instance = echarts.init(oChart.value);
    updateChart();
});
function updateChart() {
    if (props.detailV2.dtAI[4]) {
        chart.option.series[0].data[0].value = getShowValue(props.detailV2.dtAI[4].value || 0, props.detailV2.dtAI[4].x1, props.detailV2.dtAI[4].x2, props.detailV2.dtAI[4].y1, props.detailV2.dtAI[4].y2);
    }
    chart.instance?.setOption(chart.option);
}
</script>

<template>
    <section>
        <cite>
            <h1>氧气浓度监控</h1>
        </cite>
        <div ref="oChart" class="content"></div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
</style>
